import {Card, message, Space, Table, Tag, Image, Switch, Button} from "antd";
import './ArticleList.css'
import {ColumnsType} from "antd/es/table";
import React, {useEffect, useState} from "react";
import {useNavigate} from "react-router-dom";

interface ArticleDataType {
    id:number;
    articleCover: string;
    articleTitle: string;
    categoryName:string;
    tagDTOList: Array<object>;
    viewsCount: number;
    likeCount:number;
    //type:1原创，2转载
    type:number;
    createTime:string;
    isTop:number;
}

const columns: ColumnsType<ArticleDataType> = [
    {
        title: '文章封面',
        dataIndex: 'articleCover',
        key: 'id',
        align: 'center',
        render: (articleCover) => <Image width={120} src={articleCover}/>,
    },
    {
        title: '标题',
        dataIndex: 'articleTitle',
        key: 'id',
        align: 'center',
    },
    {
        title: '分类',
        dataIndex: 'categoryName',
        key: 'id',
        align: 'center'
    },
    {
        title: '标签',
        key: 'id',
        align: 'center',
        dataIndex: 'tagDTOList',
        render: (_, { tagDTOList }) => (
            <>
                {tagDTOList.map((tag:any) => {

                    // geekblue   volcano
                    return (
                        <Tag color={'green'} key={tag.id}>
                            {tag.tagName}
                        </Tag>
                    );
                })}
            </>
        ),
    },
    {
        title: '浏览量',
        dataIndex: 'viewsCount',
        key: 'id',
        align: 'center',
        render(viewsCount) {
            return viewsCount || '0'
        }
    },
    {
        title: '点赞量',
        dataIndex: 'likeCount',
        key: 'id',
        align: 'center',
        render(likeCount) {
            return likeCount || '0'
        }
    },
    {
        title: '类型',
        key: 'id',
        align: 'center',
        dataIndex: 'type',
        render: (_, { type }) => (
            <>
                <Tag color={type==1?'volcano':'geekblue'}>
                    {type==1?'原创':'转载'}
                </Tag>
            </>
        ),
    },
    {
        title: '发表时间',
        dataIndex: 'createTime',
        key: 'id',
        align: 'center',
        render(createTime) {
            return createTime.split('T')[0]
        }
    },
    {
        title: '置顶',
        key: 'id',
        align: 'center',
        dataIndex: 'isTop',
        render: (_, { isTop }) => (
            <>
                <Switch checkedChildren="置顶" unCheckedChildren="关闭" defaultChecked={isTop===1?true:false} />
            </>
        ),
    },
    {
        title: '操作',
        key: 'id',
        align: 'center',
        render: (_, {  }) => (

            <>
                <Button type="primary" className={"groupBtn"} href={"/main/article/article-edit"}>
                    编辑
                </Button>
                <Button type="primary" danger >
                    删除
                </Button>
            </>
        ),
    },

];


const ArticleList = () => {
    //hooks
    const [messageApi, contextHolder] = message.useMessage();
    const navigate = useNavigate();
    //变量
    const [articleData, setArticleData] = useState([])
    const [tablePageCount, setTablePageCount] = useState(0)
    const [loading,setLoading]=useState(true)

    //表格选中按钮配置
    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: ArticleDataType[]) => {
            console.log(`已选中: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record: ArticleDataType) => ({
            disabled: false,//点击的表格是否禁用
            name: record.articleTitle,
        }),
    };
    //表格分页配置
    const paginationProps = {
        showSizeChanger: true,
        defaultPageSize:5,
        pageSizeOptions: [5, 10, 20],//每页显示几个
        showQuickJumper: true,//快速到第几页
        showTotal: () => `共 ${tablePageCount} 条`, // 显示总共有多少条

    };

        //请求
        useEffect(() => {
            window.req.articlesData({
                current: 1,
                size: 10,
                isDelete: 0
            }).then((res: any) => {
                console.log(res);
                if (res.code === 20000) {
                    console.log(res.data.recordList)
                    setArticleData(res.data.recordList)
                    setTablePageCount(res.data.count)
                    setLoading(false)
                } else {
                    messageApi.open({
                        type: 'error',
                        content: '数据错误',
                    });
                    setLoading(false)
                }

            })
        }, [])

        return (
            <div className={"ArticleList_box"}>
                {contextHolder}
                <Card className={"ArticleList_card"}>
                    {/*摸坑：table 选中栏，必须要写上rowKey={record => record.id} 不然就是点击一个，然后就全选了 */}
                    <Table bordered={true} rowSelection={rowSelection} columns={columns} dataSource={articleData}
                           rowKey={record => record.id} pagination={paginationProps} loading={loading}
                    />
                </Card>
            </div>
        )
}
export default ArticleList;
